<template>
  <div class="system">
    <!-- header -->
    <van-nav-bar
      title="系统设置"
      left-text="返回"
      class="system__nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- content -->
    <van-cell-group class="system-main">
      <van-cell v-for="(system, index) in systemData" :key="index" center :title="system.label">
        <template #right-icon>
          <van-switch v-model="system.switched" active-color="#e4393c" size="24" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "System",
  data() {
    return {
      systemData: [
        { label: "震动", switched: true },
        { label: "声音", switched: true },
        { label: "消息通知", switched: true }
      ]
    };
  },
    mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require('statusBar');
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret){
        _this.$refs.header.$el.style.height = (ret.statusHeight + 44) + 'px';
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + 'px';
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    }
  }
};
</script>

<style lang="scss" scoped>
.system {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .system-main {
    width: 100%;
    .van-button {
      width: 343px;
      margin-left: 16px;
      margin-top: 30px;
      padding: 0 15px;
    }
  }
}
</style>
